<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            margin: 0 auto;
            width: 500px;
            padding: 20px;
            /* background-color: rgb(181, 156, 140); */
            border: 2px solid rgb(181, 156, 140);
            border-radius: 30px;
        }
        .activce{
            width: 100%;
            height: 200px;
            text-align: center;
            line-height: 200px;
            color: yellow;
            font-size: 30px;
            background-color: rgb(210, 216, 213);
            border-radius: 10px;
            box-shadow: 0 0 10px rgb(210, 216, 213);
            text-shadow: 0 0 10px pink;
        }

        .button_box{
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
        }

        .buttoncss{
            width: 100px;
            height: 30px;
            background-color: rgb(124, 189, 149);
            border-radius: 10px;
            border: none;
            box-shadow: 0 0 10px rgb(124, 189, 149);
        }

        .buttoncss:active{
            box-shadow: 3px 3px 5px gray;
        }
    </style>
</head>
<body>
    <div id="app">
        <com @indexx="qiehuan"></com>
        <com2 v-bind:props_a="a"></com2>
    </div>

    <script src="./js/vue.js"></script>

    <script>
        let com = {
            template:`
                <div class="button_box">
                    <button v-for="(item,index) in title" @click="dianjiFn(item,index)" class="buttoncss">{{item.item}}</button>
                </div>
            `,
            data(){
                return{
                    title: [{
                        item: 'html'
                    },
                    {
                        item: 'css'
                    },
                    {
                        item: 'js'
                    },
                    {
                        item: 'vuejs'
                    },
                ],
                }
            },
            methods: {
                dianjiFn(item,index){
                    this.$emit("indexx",{indeX:index})
                }
            }

        }

        let com2 = {
            props:["props_a"],
            data(){
                return {
                    contents: [{
                        item: 'html-contents',
                    },
                    {
                        item: 'css-contents',
                    },
                    {
                        item: 'js-contents',
                    },
                    {
                        item: 'vuejs-contents',
                    }
                ]
                }
            },
            template:`
                <div>
                    <div v-for="(item,index) in contents" class="activce" v-show="props_a == index ? true : false">{{item.item}}</div>
                </div>
            `,
            methods: {
                abbfn(a){
                    console.log(this.props_a);
                    console.log(a);
                }
            }
        }

        let vm = new Vue({
            el:"#app",
            data:{
                a:0
            },
            components: {
                com,
                com2
            },
            methods: {
                qiehuan(abc){
                    this.a = abc.indeX
                    console.log(abc);
                }
            }
        })
    </script>
</body>
</html>